// import * as THREE from './lib/three.module.js'
import Stage from '../../public/Stage.js'

window.THREE = THREE
function getPointMesh(pos,color=0x00ff00) {
   let dotGeometry = new THREE.Geometry();
  dotGeometry.vertices.push(new THREE.Vector3(pos.x, pos.y, pos.z));
  let dotMaterial = new THREE.PointsMaterial({ size: 10, sizeAttenuation: false, color: color });
  let mesh = new THREE.Points(dotGeometry, dotMaterial);
  mesh.name = "selfPoint"
  return mesh
}

export function getCircleGeo(pos, radius) {
    var torus = new THREE.Mesh(
    new THREE.TorusGeometry(radius, 0.03, 25, 80),
    new THREE.MeshBasicMaterial({
        color: 0x00C8C8,
        wireframe: true
    }))
    // torus.rotation.x = 1.57
    torus.position.set(pos.x, pos.y, pos.z)
    torus.name = "circle"
    return torus
}


class App {
  constructor() {
    window.lm = this
    this.stage = new Stage("#app")
    this.stage.run()
    // this.addBox(10)
    this.stage.camera.position.z = 80
    this.add()
  }

  add() {
    let p1 = new THREE.Vector3(0, 0, 0)
    let p2 = new THREE.Vector3(10, 0, 0)
    let p3 = new THREE.Vector3(0, 20, 0)

    let arr = [p1, p2, p3]
    arr.forEach(item => {
      this.stage.scene.add(getPointMesh({ x: item.x, y: item.y, z: item.z }))
    })

    let { center, radius } = Math3d.getThreePointCircle(p1, p2, p3, "xoy")
    this.stage.scene.add(getPointMesh({x: center.x, y: center.y, z: 0}, 0xff0000))
    this.stage.scene.add(getCircleGeo({x: center.x, y: center.y, z: 0}, radius))
  }
}

window.onload = () => {
  let app = new App()
}
